<template>
    <div class="App">
        <div class="left">
            <VaseViewer
                :hullPoints="state.hullPoints"
                :finalThickness="state.finalThickness"
                :postProcess="state.postProcess"
        /></div>
        <div class="right">
            <Item
                v-for="value in itemInfos"
                :title="value.title"
                :imgUrls="value.imgUrls"
                :imgNames="value.imgNames"
                @clickImg="actionsItem.clickImg"
            />
            <!-- <div class="container-3d">
                <LineEdit @confirm="actions.confirm" />
            </div>
            <div class="container-3d">
                <PlateEdit @confirm="actions.confirm" />
            </div>

            <div class="container-actions">
                <a-space>
                    <div>{{ `壳厚 (mm): ${state.thickness}` }}</div>
                    <a-slider
                        style="width: 260px; height: 100%"
                        v-model:value="state.thickness"
                        :min="2"
                        :max="10"
                        @afterChange="actions.afterChangeThickness"
                    />
                </a-space>
            </div> -->
        </div>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue';
    import PlateEdit from './PlateEdit.vue';
    import LineEdit from './LineEdit.vue';
    import VaseViewer from './VaseViewer.vue';
    import Item from './Item.vue';

    const itemInfos = [
        {
            title: '截面形状',
            imgUrls: [
                '/images/cross-sectional-shape/linerSmooth.png',
                '/images/cross-sectional-shape/draw.svg',
                '/images/cross-sectional-shape/polygon.png',
                '/images/cross-sectional-shape/wave.png',
                '/images/cross-sectional-shape/freeShape.png'
            ],
            imgNames: ['默认', '绘制', '多边形', '波形', '随机形状']
        },
        {
            title: '瓶身形状',
            imgUrls: ['/images/vase-shape/default.svg', '/images/vase-shape/draw.svg'],
            imgNames: ['默认', '绘制']
        },
        {
            title: '形状变换',
            imgUrls: ['/images/vase-shape/none.svg', '/images/vase-shape/twist.png'],
            imgNames: ['无', '扭转']
        },
        {
            title: '表面效果',
            imgUrls: [
                '/images/shell-transform/none.svg',
                '/images/shell-transform/strip.png',
                '/images/shell-transform/voronoi.png',
                '/images/shell-transform/lowPoly.png'
            ],
            imgNames: ['无', '线条', '维诺图', '低面数']
        },
        {
            title: '花瓶模式',
            imgUrls: ['/images/vase-mode/normal.png', '/images/vase-mode/sprialVase.png'],
            imgNames: ['Normal', '旋转花瓶']
        }
    ];

    const state = reactive({
        hullPoints: [],
        thickness: 0,
        finalThickness: 0,
        postProcess: ''
    });

    const actions = {
        confirm(hullPoints) {
            state.hullPoints = hullPoints;
            console.log(hullPoints);
        },
        afterChangeThickness(value) {
            state.finalThickness = value;
            console.log('afterChangeThickness', state.finalThickness);
        }
    };

    const actionsItem = {
        clickImg(title, imgName) {
            state.postProcess = `${title}-${imgName}`;
            // console.error(title, imgName);
            // switch () {
            //     case '截面形状-波形':
            //         break;
            // }
        }
    };
</script>

<style lang="scss" scoped>
    .App {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;

        .left {
            position: absolute;
            left: 0;
            right: 400px;
            bottom: 0;
            top: 0;
            background-color: antiquewhite;
            border: 1px solid gray;
        }

        .right {
            position: absolute;
            width: 400px;
            right: 0;
            bottom: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            background-color: #aaaaaa;

            .container-3d {
                position: relative;
                width: 100%;
                flex: 1;
                border: 1px solid gray;
            }

            .container-actions {
                position: relative;
                width: 100%;
                height: 30px;
                border: 1px solid gray;
                padding: 5px;
            }
        }
    }
</style>
